<template>
  <view class="record">
    <view class="btn">
      <button :class="ishuiben?'':'active'" size="mini" @click="switchTab('早教')">小黑早教</button>
      <button :class="ishuiben?'active':''" size="mini" @click="switchTab('绘本')">小黑绘本</button>
    </view>
    <view class="earlyEducation" v-if="!ishuiben">
      <view class="noRecord" v-if="data.length === 0">
        <view style="text-align: center;color: red;">暂无购买记录</view>
      </view>
      <view class="container">
        <view class="container-item" v-for="item in data" :key="item.id">
          <view class="item-left">
            <image :src='item.imgSrc' mode="aspectFit"></image>
            <view class="item-text">
              <text>{{item.title}}</text>
              <text class="item-text-time">{{item.creatTime}}</text>
            </view>
          </view>
          <view class="item-right">
            <text class="item-price">{{item.price}}</text>
          </view>
        </view>
      </view>
    </view>
    <xiaohei-huiben v-else></xiaohei-huiben>
  </view>
</template>

<script lang="ts" setup>
  import {reactive,ref} from 'vue'
 const data = reactive([
   {id:1,imgSrc:'https://cdn3.axureshop.com/demo/2027306/images/%E5%86%85%E5%AE%B9%E7%AE%A1%E7%90%86/u14649.png',
   title:'躺尸三百首',creatTime:'2022-02-12 08:15:26',price:'168.00元'},
   {id:2,imgSrc:'https://cdn3.axureshop.com/demo/2027306/images/%E5%86%85%E5%AE%B9%E7%AE%A1%E7%90%86/u14649.png',
   title:'躺尸三百首',creatTime:'2022-02-12 08:15:26',price:'168.00元'},
   {id:3,imgSrc:'https://cdn3.axureshop.com/demo/2027306/images/%E5%86%85%E5%AE%B9%E7%AE%A1%E7%90%86/u14649.png',
   title:'躺尸三百首',creatTime:'2022-02-12 08:15:26',price:'168.00元'},
   {id:4,imgSrc:'https://cdn3.axureshop.com/demo/2027306/images/%E5%86%85%E5%AE%B9%E7%AE%A1%E7%90%86/u14649.png',
   title:'躺尸三百首',creatTime:'2022-02-12 08:15:26',price:'168.00元'}
 ])
 const ishuiben = ref(false)
  const switchTab = (type)=>{
    if(type === '绘本'){
      ishuiben.value = true
    }else{
      ishuiben.value = false
    }
  }
</script>

<style lang="scss">
.record{
  .btn{
    text-align: center;
    height: 100rpx;
    line-height: 140rpx;
    border-bottom: 1px solid gray;
    button{
      border-radius: 40rpx;
    }
    .active{
      background-color: #000;
      color: white;
    }
  }
  .container{
    border: 1px solid #ccc;
    font-size: 14px;
    color: #333;
    .container-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      .item-left{
        display: flex;
        align-items: center;
        image{
          width: 140rpx;
          height: 140rpx;
          vertical-align: middle;
        }
        .item-text{
          display: flex;
          flex-flow:column;
          justify-content: space-around;
          align-items: flex-start;
          margin-left: 10rpx;
          .item-text-time{
            margin-top: 20rpx;
          }
        }
      }
      .item-right{
        .item-price{
          color: red;
          &:before{
            content: '￥';
          }
        }
      }
    }
  }
}
</style>
